<template>
  <!-- 面包屑导航 -->
    <div style="margin-top: 20px; margin-left: 20px">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><b>我的课堂</b></el-breadcrumb-item>
            <el-breadcrumb-item @click=" router.push('/classStart/teacherCourseInfo')">课程信息</el-breadcrumb-item>
            <el-breadcrumb-item>签到页面</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

  <!-- 签到按钮 -->
    <div class="button-container" style="margin-top: 20px; margin-left: 20px">
        <el-button type="primary" round @click="postSign">发布签到</el-button>
    </div>

  <!-- 签到表格 -->
    <div class="table-container">
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="postTime" label="发布时间" />
            <el-table-column prop="endTime" label="截止时间" />
            <el-table-column prop="code" label="验证码" />
            <el-table-column label="操作" >
                <template #default="scope">
                    <el-button type="success"
                               @click="finishSignClick(scope.row.postTime)"
                               plain
                    >已签到的学生</el-button>
                    <el-button type="danger"
                               @click="unfinishSignClick(scope.row.postTime)"
                               plain>未签到的学生</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
  <!-- 分页按钮 -->
    <div class="demo-pagination-block">
        <el-pagination
                v-model:current-page="pagination.currentPage"
                v-model:page-size="pagination.pageSize"
                :page-sizes="[5, 10, 15, 20]"
                :total="pagination.total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
    </div>

  <!--    发布签到按钮对话框-->
    <el-dialog v-model="tableEditVisible" title="发布签到" width="500">
        确定要发布签到吗
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="reset">取消</el-button>
                <el-button type="primary" @click="submitForm">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import router from "../../../../router/index.js";
import {CirclePlusFilled} from "@element-plus/icons-vue";
import request8090 from "../../../../utils/request8090.js";


const tableData = ref([]);
//初始化的默认分页大小
const pagination = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0
});
onMounted(() => {
    fetchSign()
});
// 获取签到信息
onMounted(() => {
    fetchSign()
});

// 获取签到信息
const fetchSign = () => {
    request8090({
        url: '/teacher/getpostsigninfo',
        method: 'GET',
        params: { currentPage: pagination.value.currentPage, size: pagination.value.pageSize, courseNumber: sessionStorage.getItem("courseNumber") },
    })
        .then(res => {
            if (res.data.errorCode === 200) {
                // 计算每个记录的截止时间
                tableData.value = res.data.data.records.map(record => {
                    const postTime = new Date(record.postTime);
                    const endTime = new Date(postTime.getTime() + 10 * 60 * 1000); // 加十分钟

                    // 格式化 endTime 为 'YYYY-MM-DD HH:mm:ss' 格式
                    const formattedEndTime = `${endTime.getFullYear()}-${String(endTime.getMonth() + 1).padStart(2, '0')}-${String(endTime.getDate()).padStart(2, '0')} ${String(endTime.getHours()).padStart(2, '0')}:${String(endTime.getMinutes()).padStart(2, '0')}:${String(endTime.getSeconds()).padStart(2, '0')}`;

                    return {
                        ...record,
                        endTime: formattedEndTime
                    };
                });
                pagination.value.total = res.data.data.total;
            } else {
                ElMessage.error('获取数据失败');
            }
        })
        .catch(error => {
            console.error('请求失败:', error);
            ElMessage.error('请求失败');
        });
};
//显示行数大小改变时刷新页面
const handleSizeChange = (size) => {
    pagination.value.pageSize = size;
    fetchSign();
}
//显示页数改变时刷新页面
const handleCurrentChange = (page) => {
    pagination.value.currentPage = page;
    fetchSign();
}

// 点击已签到学生按钮时存储postTime并跳转路由
const finishSignClick = (postTime) => {
    sessionStorage.setItem("postTime", postTime);
    router.push('/classStart/finishSignStudents'); // 跳转到已签到学生页面
}

// 点击未签到学生按钮时存储postTime并跳转路由
const unfinishSignClick = (postTime) => {
    sessionStorage.setItem("postTime", postTime);
    router.push('/classStart/unSignStudents'); // 跳转到未签到学生页面

}
const tableEditVisible= ref(false)
// 点击发起签到按钮时调用postSign函数
const postSign = () =>{
    tableEditVisible.value=true
}

// 点击重置按钮时调用reset函数
const reset=()=>{
    tableEditVisible.value=false
}
// 点击确认按钮时事件
const submitForm =()=>{
    const  course={
        courseNumber: sessionStorage.getItem('courseNumber'),
        teacherNumber: sessionStorage.getItem('teacherNumber'),
        teacherName: sessionStorage.getItem('name'),
    }
    // 发送发布签到请求
    request8090({
        url:'/teacher/postsignin',
        method:'post',
        headers: {
            'Content-Type': 'application/json'
        },
        data:JSON.stringify(course)
    }).then(res => {
        if (200==res.data.errorCode){
            ElMessage.success('发布成功');
            fetchSign()
            reset()
        } else {
            ElMessage.error('发布失败');
        }
    })
        .catch(error => {
            console.error('请求失败:', error);
            ElMessage.error('请求失败');
        });
}
</script>

<style scoped>

</style>